<template>
  <div>
    <el-button text @click="dialogVisible = true"> 打开弹窗 </el-button>

    <cv-dialog-form
      v-model="dialogVisible"
      title="hello"
      :form-data="dynamicValidateForm"
      @confirm="saveHandle"
    >
      <cv-form-item
        :input="{
          type: 'text',
        }"
        :prop="getPropKey(dynamicValidateForm, 'email')"
        label="邮箱"
      ></cv-form-item>

      <cv-form-item
        label="123"
        prop=""
        :input="{
          type: 'text',
        }"
      ></cv-form-item>

      <cv-form-item
        :prop="getPropKey(dynamicValidateForm, 'category')"
        label="分类"
        :select="{
          data: selectdata.list,
        }"
      ></cv-form-item>

      <cv-form-item
        :prop="getPropKey(dynamicValidateForm, 'gender')"
        label="性别"
        :radio="{
          data: selectdata.list,
        }"
      ></cv-form-item>

      <cv-form-item
        :prop="getPropKey(dynamicValidateForm, 'gender1')"
        label="爱好"
        :checkbox="{
          data: selectdata.list,
        }"
      ></cv-form-item>

      <cv-form-item
        :prop="getPropKey(dynamicValidateForm, 'number')"
        label="数量"
        :input-number="{
          step: 10,
        }"
      ></cv-form-item>

      <cv-form-item
        :prop="getPropKey(dynamicValidateForm, 'state')"
        label="状态"
        :switchs="{
          default: true,
        }"
      ></cv-form-item>
    </cv-dialog-form>
  </div>
</template>

<script setup lang="ts">
import type { CvDialogFromConfirm } from '@/packages/components'
import { getPropKey } from '@/utils/common'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const selectdata = reactive({
  list: [
    {
      id: 1,
      name: 'zs',
    },
    {
      id: 2,
      name: 'ls',
    },
  ],
})

const dialogVisible = ref(false)

interface A {
  category: string
  email: string
  gender: number
  gender1: Array<any>
  number: number
  state: number
}

const dynamicValidateForm = reactive<A>({
  category: '',
  email: '',
  gender: 1,
  gender1: [],
  number: 1,
  state: 1,
})

//保存
const saveHandle: CvDialogFromConfirm<A> = (e, close) => {
  console.log(e)
  close()
}
</script>
<style lang="scss" scoped></style>
